<template>
  <c-model v-model="show" width="620px" title="密码支付" @close="onClose">
    <div class="password-model">
      <div class="pwd-title">请输入支付密码完成支付</div>
      <div class="money">
        <span class="bold fz-24 h-32">应付</span>
        <span class="price">{{money}}</span>
      </div>
      <div class="input-box">
        <div class="code-item"
             :class="{active: focus && index == Math.max(password.length-1, 0)}"
             :ref="`input-${index}`"
             v-for="(i, index) in 6">
          <span v-if="values[index]"></span>
        </div>
        <Input
          class="i-input"
          ref="pwd"
          maxlength="6"
          v-model="password"
          type="password"
          @on-blur="onBlur"
          @on-focus="onFocus"
          @on-change="onInput"
        />
      </div>
    </div>
    <div class="footer" slot="footer">
      <i-button type="primary" :disabled="!password || password.length < 6" @click="submit">结算</i-button>
    </div>
  </c-model>
</template>
<script>
export default {
  name: "index",
  props: {
    value: false,
    money: {type: Number|String, default: 0}
  },
  data() {
    return {
      password: '',
      focus: false
    }
  },
  computed: {
    show: {
      get() {
        return this.value
      },
      set(val) {
        this.$emit("input", val)
      }
    },
    values() {
      let value = this.password.split('')
      return value
    }
  },
  methods: {
    onClose() {
      this.$emit('close')
    },
    onFocus() {
      this.focus = true
    },
    onBlur() {
      this.focus = false
    },
    onInput(e) {

    },
    submit() {
      if (!this.password) {
        this.$Message.error('请输入支付密码')
        return false
      }
      this.show = false
      this.$emit('confirm', this.password)
    }
  },
  watch: {
    show() {
      if (this.show) {
        this.password = ''
        this.$nextTick(() => {
          this.$refs.pwd.focus({
            cursor: 'start'
          });
        });
      }
    }
  }
}
</script>



<style scoped lang="scss">
.password-model {
  text-align: center;
  .pwd-title {
    font-size: 24px;
    font-weight: bold;
    margin-bottom: 26px;
  }
  .money {
    font-size: 24px;
    font-weight: bold;
    margin-bottom: 33px;
    @include flex_center();
    .price {
      @include price($-color-brown, 36, 24);
    }
  }
}
.input-box {
  display: flex;
  align-items: center;
  width: calc(48px * 6);
  height: 48px;
  position: relative;
  margin: 0 auto;
  .code-item {
    border-top: 1px solid #E6E6E6;
    border-bottom: 1px solid #E6E6E6;
    border-right: 1px solid #E6E6E6;
    width: 48px;
    line-height: 48px;
    height: 100%;
    text-align: center;
    display: flex;
    align-items: center;
    font-size: 50px;
    outline: none;
    caret-color: transparent;
    &:nth-child(odd) {
      border-left-color: transparent;
    }
    &:first-child {
      border-left: 1px solid #E6E6E6;
    }
    &.active {
      border: 1px solid;
      @include border-color();
    }
    span {
      display: inline-block;
      width: 14px;
      height: 14px;
      background: #000;
      border-radius: 100%;
      margin: 0 auto;
    }
  }
  .i-input {
    position: absolute;
    height: 100%;
    width: 100%;
    user-select: none;
    ::v-deep .ivu-input {
      height: 100%;
      width: 100%;
      border: none!important;
      padding: 0;
      background: transparent;
      box-shadow: none!important;
      color: transparent;
      user-select: none;
    }
  }
}
.footer {
  @include flex_center();
  margin-top: 50px;
  .ivu-btn {
    width: calc(48px * 6);
    height: 48px;
    margin-bottom: 120px;
    font-size: 20px;
  }
}
</style>
